<template>
  <div id="traffic-convenience"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

const initChart = () => {
  const chartDom = document.getElementById('traffic-convenience');
  const myChart = echarts.init(chartDom);
  const option = {
    color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC'],
    title: {
      text: '交通便利性图表'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: ['线路1', '线路2', '线路3', '线路4', '线路5']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290],
      type: 'line'
    }, {
      name: '交通流量',
      type: 'bar',
      data: [150, 230, 224, 218, 135]
    }]
  };

  myChart.setOption(option);
};

onMounted(() => {
  initChart();
});
</script>

<style scoped>
#traffic-convenience {
  width: 100%;
  height: 100%;
}
</style> 